<template>
    <div>
        <Modal title="绑定手机号码" v-model="show" :closable="false" :mask-closable="false" @on-visible-change="showModal" :width="500">
            <el-form ref="waybill" label-position="right" label-width="120px" :model="waybill" :rules="rules">
                <el-form-item label="手机号码" prop="phone">
                    <el-input size="small"   v-model="waybill.phone" placeholder="请输入手机号号码" style="width: 260px" />
                </el-form-item>
                <el-form-item label="验证码" prop="code">
                    <el-input size="small"   v-model="waybill.code" type="text" placeholder="验证码" style="width: 160px" />
                    <el-button :loading="asyncLoading" @click="asyncImg" :disabled="second>0" type="success" style="margin-left: 10px">{{showText}}</el-button>
                </el-form-item>

                
           </el-form>

            <div slot="footer">
               
                <el-button type="primary" :loading="modalLoading" @click="ok">绑定</el-button>
            </div>
        </Modal>
    </div>
</template>
<script>
export default {
    name: 'Waybill',
    data() {
        return {
            second: 0,
            interval: null,
            title: "",
            asyncLoading: false,
            modalLoading: false,
            waybill: {
                phone: "",
                code: ""
            },
            rules: {
                phone: [{ required: true, message: "手机号码不能为空" }],
                code: [{ required: true, message: "验证码不能为空" }]
            }
        }
    },

    mounted: function() {



    },
    computed: {
        showText:function(){
            if(this.second>0)
            {
                return this.second+"s后获取";
            }
            else{
                return "获取验证码";
            }
        }
    },
    props: [
        'show',
    ],
    methods: {
        showModal:function(value)
        {
            if(value)
            {

            }
        },
        asyncImg: function() { var me=this;
            if (!me.waybill.phone || me.waybill.phone == "" || me.waybill.phone.length!= 11) {
                me.errorMessage('请输入11位手机号码');
                return;
            }

            me.asyncLoading = true;
            me.$http.post("/yht/merchant/getCode.do", me.waybill).then(response => {
                var body = response;
                if (body.status == 0) {
                    //倒计时
                    me.second = 59;
                    me.interval = setInterval(function() { me.setTi() }, 1000);
                } else {
                    me.errorMessage(body.info);
                }
                me.asyncLoading = false;
            }, response => {
                me.asyncLoading = false;
            });

        },
        setTi: function() {
            if (this.second == 0) {
                if (this.interval) window.clearInterval(this.interval);
                return;
            } else {
                this.second--;
            }
        },
        ok: function() {

            this.$refs['waybill'].validate((valid) => {

                if (valid) {
                    this.okSubmit();
                } else {
                    this.errorMessage('请填号手机号码跟验证码');
                }
            });




        },
        okSubmit: function() {
            var me = this;
            if (!this.waybill.code || this.waybill.code == "" || this.waybill.code.length != 6) {
                this.errorMessage('请输入6位验证码');
                return;
            }
           
            if (!this.waybill.phone || this.waybill.phone == "" || this.waybill.phone.length != 11) {
                this.errorMessage('请输入11位手机号码');
                return;
            }
            me.$http.post("/merchant/dobindphone.do", me.waybill).then(response => {
                var body = response;
                if (body.status == 0) {
                    me.successMessage("绑定成功");
                    me.cancel();

                } else {
                    me.errorMessage(body.info);
                }
                me.modalLoading = false;
            }, response => {
                me.modalLoading = false;
            });
        },
        cancel: function() {

            this.$emit('cancel');
        }


    }

}
</script>
<style scoped>
</style>